<template>
  <div class="my-promulgator-mangae">
    <c-title text="需求管理"></c-title>
    <van-tabs v-model="active" color="#4978F8" title-active-color="#4978F8" @click="change">
      <van-tab title="已上架" :name="1"></van-tab>
      <van-tab title="待审核" :name="0"></van-tab>
      <van-tab title="审核驳回" :name="-1"></van-tab>
    </van-tabs>

    <div class="list">
      <router-link tag="div" :to="fun.getUrl('anytimeDemand', { type: 2, demand_id: item.id })" class="list-item"
        v-for="item in list" :key="item.id">
        <van-image width="6.8125rem" height="6.8125rem" style="border-radius: 0.25rem;overflow: hidden;"
          :src="item.image_url" />
        <div class="item-right">
          <p class="title">{{ item.title }}</p>
          <p class="content">{{ item.content }}</p>
          <p class="time">服务时间：{{ item.start_time_str }}-{{ item.finish_time_str }}</p>
          <div class="flex-between" style="margin-top: 0.5625rem;">
            <div style="color: #FF9C43;">
              <span>{{ $i18n.t('money') }}</span><span class="fz32 fw-500">{{ item.service_fee }}</span>
            </div>
            <van-button class="btn" size="small" @click.stop="check_order(item.order_id)">查看订单</van-button>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
import { Image as VanImage } from 'vant';
import { scrollMixin } from '../../../../../utils/mixin';
export default {
  components: { VanImage },
  mixins: [scrollMixin],
  activated() {
    this.getData();
  },
  data() {
    return {
      active: 1,

      page: 1,
      list: [],
      total_page: 1,
      isLoadMore: true,
    };
  },
  methods: {
    check_order(order_id) {
      this.$router.push(
        this.fun.getUrl("anyOrderDetail", { type: "individual", order_id })
      );
    },
    change() {
      this.getData();
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this.page >= this.total_page) {
        return;
      }
      let page = this.page + 1;
      this.getData(page);
    },
    getData(page = 1) {
      $http.get('plugin.be-within-call.frontend.publish.need', {
        state: this.active,
        page
      }, '').then(res => {
        this.isLoadMore = true;
        if (res.result) {
          this.page = res.data.current_page;
          this.total_page = res.data.last_page;
          (page == 1) ? (this.list = res.data.data) : (this.list = this.list.concat(res.data.data))
        } else {
          this.$toast(res.msg);
        }
      })
    },
  }
};
</script>

<style scoped lang="scss">
  .isPcBtn{
    width: 375px !important;
    left:50% !important;
    transform: translateX(-50%) !important;
  }

.my-promulgator-mangae {
  .list-item {
    background: #fff;
    margin: .5rem 0;
    padding: .75rem;
    display: flex;
  }

  .item-right {
    margin-left: .375rem;
    flex: 1;
    padding-top: .4063rem;
    text-align: left;
  }

  .title {
    font-size: 0.9rem;
  }

  .btn {
    background: #fff;
    border-color: #FF9C43;
    font-size: .8rem;
    color: #FF9C43;
    border-radius: 1.0938rem;
  }

  .fw-500 {
    font-weight: 500;
  }

  .content {
    color: #999999;
    font-size: .9rem;
    margin-top: .75rem;
    margin-bottom: .5rem;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .fz32 {
    font-size: 1rem;
  }

  .time {
    background: #FFEEDF;
    color: #FF9C43;
    font-size: .6875rem;
    padding: 0.3125rem 0.375rem;
  }
}</style>
